<template>
	<div class="loading" v-show="ajaxing" :style="{'z-index':loadingZIndex}">
		<div class="loading-inner">
            <div class="loading_wrap">
                <!-- <div class="loading_icon"></div> -->
                <img class="loading_img" src="~imgs/components/loading.gif" alt="">
            </div>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default{
	computed: mapState({
      ajaxing: state => state.ajaxing,
      loadingZIndex: state => state.loadingZIndex,
    }),
}	
</script>
<style scoped>
    .loading{
        position: fixed;
        width: 7.5rem;
        left:50%;
        margin-left: -3.75rem;
        top:1.2rem;
        bottom:0;
        background-color: rgba(0,0,0,0);
        z-index: 100;
    }
    .loading-inner{
        position: absolute;
        top:45%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding:0.25rem 0.3rem 0.15rem;
        border-radius:0.16rem;
        /* background-color: rgba(255,255,255,0.8); */
    }
    .loading_wrap{
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 0.2rem;
        background-color: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loading_img{
        width: 0.72rem;
        height: 0.72rem;
    }

    .loading_icon{
      border: 6px solid hsla(185, 100%, 62%, 0.5);
      border-top-color: #3cefff;
      border-radius: 50%;
      width: 0.8rem;
      height: 0.8rem;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
</style>